<template>
	<view class="page-content">
		<view class="n_title"><span class="n_back" @click="common.navback()"> < </span>{{title}}</view>
		<view class="content-content">
			<view>
				<uni-easyinput 
				:styles="{
				    borderColor: '#203051', // 设置边框颜色
				    hoverBorderColor: '#203051', // 设置悬停状态边框颜色
				    focusBorderColor: '#203051', // 设置聚焦状态边框颜色
					color:'#ffffff'
				  }"
				suffixIcon="search" v-model="text"  placeholder="搜索:设备名,设备编号" @iconClick="search()"></uni-easyinput>
			</view>
			<view>
				<scroll-view scroll-y="true" @scrolltolower="getNextPage" class="scroll-view">
					<view v-for="(d,dix) in page.records" class="device-item" :key="'d'+dix">
						<view class="uni-row d-pannel" @click="detail(d)">
							<view class="device1 ellipsis_p">
								<view>{{d.name}}</view>
								<view>{{d.regionPname}}</view>
								<view>{{d.regionName}}</view>
							</view>
							<view class="device2 ellipsis_p">
								<view>{{d.no}}</view>
								<view>{{d.supplierBrandName}}</view>
								<view>{{d.supplierBrandModelName}}</view>
							</view>
							<view class="device3">
								<view v-if="d.status=='1'" class="btn1">入库</view>
								<view v-if="d.status=='2'" class="btn2">出库</view>
								<view v-if="d.status=='3'" class="btn3">使用</view>
								<view v-if="d.status=='4'" class="btn4">维护</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classify:null,
				classifyName:null,
				title: null,
				text:null,
				page:{
					current:1,
					pages:null,
					records:[]
				}
			}
		},
		onShow(){
			this.title = this.classifyName+'-设备列表'
			this.getData()
		},

		onLoad(query) {
			this.classify = query.classify
			this.classifyName=query.classifyName
		},
		methods: {
			search(){
				this.page={
					current:1,
					pages:null,
					records:[]
				}
				this.getData()
			},
			detail(d){
				uni.navigateTo({
					url: '/pages/device/detail?id='+d.id+'&name='+d.name
				});
			},
			getNextPage(){
				if (!this.page.pages){
					return
				}
				if (this.page.current>=this.page.pages){
					return
				}
				this.page.current = this.page.current + 1
				this.getData()
			},
			getData(){
				let url='/api/device/list'
				this.common.get(url,{
					text:this.text,
					classify:this.classify,
					pageNo:this.page.current
				},(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					let datas = this.page.records.concat(res.data.records);
					this.page.current = res.data.current
					this.page.pages = res.data.pages
					this.page.records = datas
					
				})
			},
			more(d){
				uni.redirectTo({
					url: '/pages/device/list?curRoute='+curRoute
				});
			},
		}
	}
</script>

<style>
	.scroll-view{
		height: calc(100vh - 120px);
		padding-bottom: 10px;
	}
	.tab-view>view{
		width: calc((100% - 40px) / 2);
	}
	.data-item-deal{
		text-align: right;
	}
	.deviceName{
		background: #15203c;
		border-radius: 3.33px;
		font-weight: bold;
		color: #ffffff;
		color: #ffffff;
		height: 30px;
		line-height: 30px;
		border-radius: 6.67px;
		box-shadow: 0px 3.33px 5px 0px rgba(3, 17, 45, 0.27);
		font-size: 20px;
	}
	.data-item>view{
		margin-top: 10px;
		padding-left: 10px;
	}
	.device-item{
		margin-top: 10px;
	}
	.device1{
		width: 130px;
	}
	.device2{
		width: calc((100% - 200px));
	}
	.device3{
		width: 50px;
	}
	.search_input{
		background: #203051;
		padding: 5px 10px;
		height: 30px;
		border-radius: 17px 16px 16px 17px;
	}
</style>
